<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="renderer" content="webkit">
    <title>div向下掉落</title>
    <style type="text/css">
        div {
            width: 40px;
            height: 40px;
            display: inline-block;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>
<body>

    <script type="text/javascript">
        var str='';
        var body=document.getElementsByTagName('body')[0];
        for (var i = 0; i < 10; i++) {
            str += '<div style="left:'+i*45+'px;background:red"></div>';
        }
        document.body.innerHTML=str;
//        var aDiv=document.getElementsByTagName('div');
//        for (var i = 0; i < aDiv.length; i++) {
//            aDiv[i].index=i;
//            aDiv[i].onclick=function () {
//                this.style.transition='1s';
//                this.style.top='200px';
//                var previousThis=this,nextThis=this;
//                var t1=2,t2=2;
//                while(previousThis || nextThis){
//                    if(previousThis){
//                        previousThis = previousThis.previousElementSibling;
//                        previousThis.style.transition = (t1++)+'s';
//                        previousThis.style.top='200px';
//                    }
//                    if(nextThis){
//                        nextThis = nextThis.nextElementSibling;
//                        nextThis.style.transition = (t2++) +'s';
//                        nextThis.style.top='200px';
//                    }
//                }
//            };
//        }

        var aDiv=document.getElementsByTagName('div');
        for (var i = 0; i < aDiv.length; i++) {
            aDiv[i].index=i;
            aDiv[i].onclick=function () {
                this.style.transition='1s';
                this.style.top='200px';
                var that1=this;////!!用临时变量that存储this,不然会报错
                var that2=this;
                var that=this;
                var t=2;

                while(that1 || that2){
                    if(that.index<=aDiv.length/2){
                        that1.nextElementSibling.style.transition = t+'s';
                        that1.nextElementSibling.style.top='200px';
                        that1=that1.nextElementSibling;
                        if(that2.previousElementSibling){
                            that2.previousElementSibling.style.transition = t+'s';
                            that2.previousElementSibling.style.top='200px';
                            that2=that2.previousElementSibling;
                        }

                    }else if(that.index>aDiv.length/2){
                        if(that1.nextElementSibling){
                            that1.nextElementSibling.style.transition = t+'s';
                            that1.nextElementSibling.style.top='200px';
                            that1=that1.nextElementSibling;
                        }
                        that2.previousElementSibling.style.transition = t+'s';
                        that2.previousElementSibling.style.top='200px';
                        that2=that2.previousElementSibling;
                    }

                    t++;
                }

            };
        }
    </script>
</body>
</html>